<template>
  <div>
    <van-nav-bar title="商品列表" right-text="去登陆" @click-right="onClickRight">
      <template #left>
        <van-icon name="cart-o" color="black" :badge="userlist.length" size="25" />
      </template>
    </van-nav-bar>
    <div class="home_box">
      <div v-for="(item,index) in addlist" :key="index" @click="goto(item)">
        <div class="home_item_img">
          <img :src="item.mainPic" width="100%" />
        </div>
        <div class="home_item_content">
          <p>￥：{{item.actualPrice}}</p>
          <p>{{item.dtitle}}</p>
          <van-button
            plain
            type="info"
            icon="https://img.yzcdn.cn/vant/logo.png"
            style="margin-left: 35px;"
            size="small"
          >加入购物车</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var uservalue = false;
export default {
  data() {
    return {};
  },
  methods: {
    onClickRight() {
      this.$router.push("/user");
    },
    goto(item) {
      this.$router.push("/about");
      // beforeRouteEnter: (to, from, next) => {
      //   if (!(localStorage.getItem('User'))) {
      //     alert("您还没有登陆，请先登陆！");
      //     next("/user");
      //   } else {
      //     alert("可以购物");
      //     next("/");

      //   }
      //   // next()

      // };
      this.$store.dispatch("GOTOUSER", item);
    }
  },
  mounted() {
    this.$store.dispatch("ADDLIST");
  },
  computed: {
    addlist() {
      return this.$store.state.addlist;
    },
    userlist() {
      return this.$store.state.userlist;
    }
  }
};
</script>
<style scoped>
.home_box {
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  flex-wrap: wrap;
}
.home_box > div {
  width: 47%;
  margin: 4.5px;
  border: 1px solid red;
  /* height: 200px; */
}
.home_item_content {
  font-size: 14px;
}
</style>
